<ng-container *ngIf="(filters$ | async) as filters">
  <ng-container *ngFor="let filter of filters">
    <div class="facet mb-3" *ngIf="filter.options?.length">
      <h3 class="control-label filter-group-label mb-1">{{filter.label | translate}}</h3>
      <div class="list-group filter-group">
        <label *ngFor="let opt of filter.options" class="list-group-item filter-item" [ngClass]="{'list-group-item-primary': opt.active, 'active': opt.focused}">
          <div class="form-check">
            <input type="checkbox" tabindex="0" [id]="opt.id" class="form-check-input" [value]="opt.value" [checked]="opt.active" (change)="setFilter($event, filter.name, opt.value)" (focus)="opt.focused=true" (blur)="opt.focused=false">
            <span class="filter-label">{{opt.label || (opt.tlabel | translate)}}
              <span class="badge badge-primary badge-pill ml-1" *ngIf="opt.count">{{opt.count | shortNumber}}</span>
            </span>
          </div>
        </label>
      </div>
    </div>
  </ng-container>
</ng-container>
